@import '/src/assets/style/common.less';

.excellent {
  padding: 20px 30px;

  &__control {
    display: flex;
    height: 16px;
    justify-content: space-between;
    line-height: 16px;
    margin-bottom: 15px;

    &-title {
      font-size: 16px;

      span {
        color: #999;
      }
    }

    &-pick {
      background-color: transparent;
      border: 1px solid #d9d9d9;
      border-radius: 11px;
      height: 22px;
      line-height: 22px;
      padding: 0 15px;
      width: auto;

      &:hover {
        background-color: #f2f2f2;
      }
    }
  }

  &__card {
    display: grid;
    grid-gap: 20px 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  &__item {
    display: flex;
  }

  &__img {
    border-radius: 4px;
    flex-shrink: 0;
    height: 135px;
    width: 135px;
  }

  &__right {
    color: #b1b1b1;
    flex: 1;
    margin-left: 10px;
    padding: 25px 0;
    width: 0;

    h3 {
      color: #333;
      font-weight: normal;
      margin-bottom: 0;
      .ellipsis();
    }

    small {
      margin-top: 16px;
    }
  }

  &__description {
    margin-top: 22px;
    .ellipsis();

    span {
      border: 1px solid #e78c86;
      color: var(--primary-color);
      display: inline-block;
      font-size: 8px;
      height: 10px;
      line-height: 1;
      padding: 0 3px;
    }
  }

  &__popover {
    height: 440px;
    width: 510px;

    .span() {
      border-radius: 15px;
      display: inline-block;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      text-align: center;

      &:hover {
        color: var(--primary-color);
      }

      &.--active {
        background-color: #fdf6f5;
        color: var(--primary-color);
      }
    }

    &-card {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 20px;
      row-gap: 20px;

      span {
        .span();
      }
    }

    &-header {
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      height: 60px;
      padding-left: 20px;
      padding-top: 15px;

      span {
        .span();
      }
    }
  }
}
